﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>

</head>
<body>
<div class="ibox-content">
		<form class="form-horizontal" id="dataform" onsubmit="javascripr:return false;">
			<input type="hidden" name="tokenUrl" value="${tokenUrl}">	 
			<input type="hidden" name="token" value="${token}">
		<c:if test="${obj ne null }">
			<input type="hidden" name="menId" value="${obj.menId }">
		</c:if>
		<div class="form-group">
			<label class="col-sm-2 control-label">菜谱分类
			<span class="text-danger">*</span>
			</label>
			<div class="col-sm-4">
			<input type="hidden"  value="${obj.menType}" class="menTypeHidden">
				<%-- <select class="form-control autoFull select2" dataType="*" nullmsg="菜谱类别不能为空" 
					data-url="${path}/admin/pcMenuCategory/all"	 
					data-value="meuId"
					data-filed="meuName"
					data-def="${obj.menType}"  
					name="menType">
				</select> --%>
				<select class="select2 form-control menType" size="1" name="menType" id="menType" >
				</select>
			</div>	
			<label class="col-sm-2 control-label">菜名
			<span class="text-danger">*</span>
			</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" name="menName" 
						maxi="20" dataType="s1-20" id="menName"
					value="<c:out value="${obj.menName }"></c:out>" nullmsg="菜名不能为空">
			</div>
			
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">拼音简称
			<span class="text-danger">*</span>
			</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" name="menAbbreviation" 
						maxi="50" dataType="s1-50"
					value="<c:out value="${obj.menAbbreviation }"></c:out>" nullmsg="拼音简称不能为空">
			</div>
			
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">添加食材
			<span class="text-danger">*</span>
			</label>
			<div class="col-sm-4">
				<button class=" btn btn-success btn-sm" id="btn_addtr" type="button" onclick="addTr()">添加食材</button>
			</div>
		</div>
			
			<table class="table table-hover" id="mgrid" >
			<tbody id="show">
 			<tr>
   				 <td align="center">食材名</td>
    			 <td align="center" >单人用量</td>
    			 <td align="center" >单位</td>
    			 <td >操作</td>
   			</tr>
   			<c:forEach var='m' items="${materials }" varStatus="s">
  			<tr>
 				<td align="center" >
	    				<select class="form-control autoFull select2"  dataType="*" nullmsg="食材名不能为空" 
							data-url="${path}/admin/pcFoodMaterial/all"	 
							data-value="fodId"
							data-filed="fodName"
							data-def="${m.fodId}" 
							name="menuFood[${s.index }].fodId" >
						</select>
				</td>
    			 <td align="center" >
    			 <input type="number" class="form-control" name="menuFood[${s.index }].menSingle"
					min="0"	dataType="s1-3"
					value="<c:out value="${m.menSingle}"></c:out>" nullmsg="单人用量不为空">
				</td>
    			 <td align="center" >
    				<select class="form-control"  dataType="*" nullmsg="单位不能为空" id="menUnit" 
    				name="menuFood[${s.index }].menUnit" >
						<option value="克" <c:if test="${m.menUnit eq '克'}"> selected="selected" </c:if> >克</option>
						<option value="千克" <c:if test="${m.menUnit eq '千克'}"> selected="selected" </c:if> >千克</option>
					</select>
    			 </td>
    			 <td align="center">
	           	 <button onclick="deleTr(this)" class=" btn btn-success btn-sm" id="btn_del" 
	           	 type="button" style="margin-bottom: 15px;">删除</button>
				 </td>
 			</tr>
 			</c:forEach>
 			
 			</tbody>
	  </table>
		<div class="form-group ">
			<div class="col-sm-12 text-center">
				<a href="javascript:;" onclick="myForm.submit()" 
					class="btn btn-success radius"><i class="fa fa-check"></i>  保存</a>&nbsp;&nbsp;&nbsp;&nbsp; <a
					class="btn btn-danger radius" href="javascript:;" onclick="MTools.closeForm()" ><i class="fa fa-close"></i> 关闭</a>
			</div>
		</div>
	</form>
	</div>
</body>
<script type="template" id="template">
			<tr>
 				<td align="center" >
	    				<select class="form-control autoFull select2"  dataType="*" nullmsg="食材名不能为空" id="foodID"
							data-url="${path}/admin/pcFoodMaterial/all"	 
							data-value="fodId"
							data-filed="fodName"
							data-def="" 
							name="foodName" >
						</select>
					<span class="Validform_checktip"></span>
				</td>
    			 <td align="center" >
    			 <input type="number" class="form-control" name="singleName"
						min="0" dataType="s1-3" 
					value="" nullmsg="单人用量不为空">
					<span class="Validform_checktip"></span>
				</td>
    			 <td align="center" >
					<select class="form-control"  dataType="*" nullmsg="单位不能为空" id="menUnit" name="unitName" >
						<option value="克"  >克</option>
						<option value="千克"  >千克</option>
					</select>
					<span class="Validform_checktip"></span>
    			 </td>
    			 <td align="center">
	           	 <button onclick="deleTr(this)" class=" btn btn-success btn-sm" id="btn_del" 
	           	 type="button" style="margin-bottom: 15px;">删除</button>
				<span class="Validform_checktip"></span>
				 </td>
 			</tr>
</script>
<script type="text/javascript" src="${path }/resource/js/systools/MJsBase.js"></script>
<script type="text/javascript">
		var i=parseInt($("tr").length)-1;
		$(".select2").select2({width:"100%"});
		MTools.autoFullSelect(); 
		var myForm=MForm.initForm({
			invokeUrl:"${path}/admin/pcMenuManage/addOrModify",
			beforeSubmit:function(){
				var i=parseInt($("tr").length);
				if(i==1){
					layer.msg("原材不能为空", {
						icon : 2,time:1000
					});
					return false;
				}
			}, 
			afterSubmit:function(){
				parent.myGrid.serchData();
			},
		});
	$(function(){
		if($("#menName").val()==""){
			addTr();
		}
		initFunctionList();
		$("#menType").select2({width:"100%"});
		});
	function addTr(){
		 $("#show").append($("#template").html().replace('foodName','menuFood['+i+'].fodId')
				 .replace('foodID','foodName'+i)
				 .replace('singleName','menuFood['+i+'].menSingle')
				 .replace('unitName','menuFood['+i+'].menUnit'));
			MTools.autoFullSelect("#foodName"+i); 	
			$("#foodName"+i).select2({width:"100%"});
			  i++;
		}; 	 
	function deleTr(node){
		$(node).closest("tr").remove();
	}
	/**
	 * 初始菜谱分类列表
	 */
	 function initFunctionList() {
			$.AjaxProxy().invoke("${path}/admin/pcMenuCategory/all",
					function(loj) {
			    			$("#menType").createSelectTree(
									loj.attr("result").rows,
									{	id : "meuId",		// 选项的值
										parent : "meuParentId",	// 父节点值
										value : "meuName",	// 要显示的名称
										append : false,
										defaultValue : $(".menTypeHidden").val(),
										defaultHtml : '<option value="0" selected="selected">请选择菜谱类别</option>'
									});
					});	
		}
	 
</script>
</body>
</html>